<template>
  <div class="c-pt260 c-flex-column c-aligni-center c-fs24">
    <img src="@/assets/blacklistError.png" alt="">
    <div class="c-pt20 c-fc-sblack">暂无权限查看，请联系管理员~</div>
    <div class="c-pt20" :class="hasContact ? 'fc-0970FF' : 'c-fc-sblack'" @click="clickShowContact">联系我们</div>
    <cust-dialog :showModal="showContactInfo" @closedModal='showContactInfo = false'>
      <article class="c-p c-pb80" v-if="contactInfo">
        <i class="iconfont c-fs24 c-fc-sgray c-pa c-p-t0 c-p-r0 c-pv24 c-ph24" @click='showContactInfo = false'>&#xe8fd;</i>
        <div class="c-pv50 c-fs28 c-fw600 c-textAlign-c">联系我们</div>
        <div class="c-pb20 c-fs22 c-ph48 c-lh36" v-if="contactInfo.email">
          <span class="c-fc-gray">邮箱：</span>
          <span>{{contactInfo.email}}</span>
        </div>
        <div class="c-pb20 c-fs22 c-ph48 c-lh36" v-if="contactInfo.qq">
          <span class="c-fc-gray">qq：</span>
          <span>{{contactInfo.qq}}</span>
        </div>
        <div class="c-pt10 c-flex-column c-flex-center" v-if="contactInfo.weChatServiceImg">
          <img :src="$addXossFilter(contactInfo.weChatServiceImg, '')" class="c-ww220 c-hh220" alt="">
          <div class="c-pt10 c-fs22 c-fc-gray c-textAlign-c">长按识别二维码联系客服</div>
        </div>
      </article>
    </cust-dialog>
  </div>
</template>

<script>
import custDialog from "@/components/templates/common/custDialog.vue";
import { utilJs } from "@/utils/common.js"
let type = 1;
export default {
  name: "blacklistError",
  components: {
    custDialog
  },
  beforeRouteLeave(to, from, next) {
    if (type == 1) {
      next(false);
    } else {
      next();
    }
  },
  data() {
    return {
      contactInfo: null,
      hasContact: true,
      showContactInfo: false,
    };
  },
  activated() {
    setDocumentTitle("黑名单");
    type = this.$route.query.type || 1;
    this.getContact();
  },
  methods: {
    getContact() {
      utilJs.getMethod(global.apiurl + "company/contactUs", res => {
        this.contactInfo = res;
        this.hasContact = res.qq || res.email || res.weChatServiceImg;
      });
    },
    clickShowContact() {
      if (!this.hasContact) {
        return;
      }
      this.showContactInfo = true;
    },
  }
};
</script>
<style scoped>
.fc-0970FF {
  color: #0970FF;
}
</style>